<template>
  <div>

    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item  style="padding:0 10px" v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  登录表单  -->
    <div>
      <el-form :label-position="labelPosition" model="form" :rules="rules" ref="form" label-width="50px" class="login-box">
        <h3>登录</h3>
        <el-form-item label="账号" prop="userId" >
          <el-input v-model="form.userId" placeholder="请输用户名或邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <div>
          <el-button type="primary" class ="loginBtn" @click="onSubmit('form')">登录</el-button>
        </div>

        <div class="tips"  style="float:right;">
          <el-link type="white" @click="retrievePWD()" >忘记密码？</el-link>

        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
          labelPosition: 'left',
      aa:'https://element.eleme.io',

      // 导航栏数据
      navList:[
        {name:'/index', navItem:'系统首页'},
        {name:'/advice',navItem:'意见反馈'},
        {name:'/login', navItem:'系统登录'},
        {name:'/register',navItem:'系统注册'}
      ],

      form: {
        userId: '',
        password: '',
        uid: '',
        name: '',
        company: '',
        phone: '',
        type: '',
        remark: '',
      },
      rules: {
        userId: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },

  methods: {

    jump(){
      window.location.assign(this.aa)
    },

    onSubmit(){
      this.$router.push({path:'/user'})
    },

    retrievePWD(){
      this.$router.push({path:'/retrieve'})
    },


  }
}
</script>

<style scoped lang="scss">
.loginBtn{
  margin: 0 auto;
}
.login-box {

  width: 4.5rem;

  margin: 1.5rem auto;

  border: aqua;

  padding: 0.4rem;

  border-radius: 0.1rem;

  box-shadow: 0 0 0.3rem #2c3e50;
}
.el-menu {
  display: flex;
  flex-wrap: nowrap;
}
</style>